<template>
  <div class="effect-check">
    <h2>培训实施效果稽查表</h2>
    <div class="operation-buttons">
      <div class="left-buttons">
        <el-button icon="el-icon-back" @click="handleBack()">返回</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="resetForm('effectForm')">新增</el-button>
      </div>
      <div class="right-buttons">
        <el-button type="primary" icon="el-icon-search" @click="showSearchDialog">查询</el-button>
      </div>
    </div>

    <!-- 查询对话框 -->
    <el-dialog title="查询记录" :visible.sync="searchDialogVisible" width="50%">
      <el-form :model="searchForm" ref="searchForm" label-width="100px">
        <el-form-item label="培训项目">
          <el-input v-model="searchForm.trainingProject" placeholder="请输入培训项目"></el-input>
        </el-form-item>
        <el-form-item label="培训时间">
          <el-date-picker
            v-model="searchForm.trainingDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="searchDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="searchRecords">查询</el-button>
      </div>
    </el-dialog>

    <!-- 查询结果对话框 -->
    <!-- 查询结果对话框 -->
    <el-dialog title="培训效果记录" :visible.sync="resultDialogVisible" width="90%">
      <el-table
          :data="searchResults"
          border
          style="width: 100%"
          :header-cell-style="{
      background: '#f5f7fa',
      color: '#606266',
      textAlign: 'center'
    }"
      >
        <el-table-column prop="trainingProject" label="培训项目" width="180"></el-table-column>
        <el-table-column prop="trainingDate" label="培训时间" width="120"></el-table-column>
        <el-table-column prop="trainingLocation" label="培训地点" width="150"></el-table-column>
        <el-table-column prop="trainer" label="培训讲师" width="120"></el-table-column>
        <el-table-column prop="participantCount" label="参加人数" width="100"></el-table-column>
        <el-table-column prop="trainingHours" label="培训课时" width="100"></el-table-column>
        <el-table-column prop="inspector" label="稽查人" width="120"></el-table-column>
        <el-table-column prop="inspectionDate" label="稽查日期" width="120"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="viewRecord(scope.row)">查看</el-button>
            <el-button type="text" @click="editRecord(scope.row)">编辑</el-button>
            <el-button type="text" style="color: #F56C6C;" @click="deleteRecord(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 主表单 -->
    <el-form :model="effectForm" ref="effectForm" :rules="rules" label-width="120px" class="effect-form">
      <!-- 基本信息 -->
      <div class="form-section">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="培训项目" prop="trainingProject">
              <el-input v-model="effectForm.trainingProject"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训时间" prop="trainingDate">
              <el-date-picker
                v-model="effectForm.trainingDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训地点" prop="trainingLocation">
              <el-input v-model="effectForm.trainingLocation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="培训讲师" prop="trainer">
              <el-input v-model="effectForm.trainer"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参加人数" prop="participantCount">
              <el-input-number v-model="effectForm.participantCount" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训课时" prop="trainingHours">
              <el-input-number v-model="effectForm.trainingHours" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="培训主要内容" prop="trainingContent">
          <el-input type="textarea" v-model="effectForm.trainingContent" rows="3"></el-input>
        </el-form-item>

        <el-form-item label="培训人员反馈情况" prop="feedback">
          <el-input type="textarea" v-model="effectForm.feedback" rows="3"></el-input>
        </el-form-item>
      </div>

      <!-- 受训人员表格 -->
      <div class="form-section">
        <h3>受训人员评估记录</h3>
        <el-table :data="effectForm.trainees" border style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
          <el-table-column label="工号" prop="employeeId" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.employeeId" class="center-input"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="name" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" class="center-input"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="department" width="150" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.department" class="center-input"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="职位" prop="position" width="120" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.position" class="center-input"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="评估结果" prop="evaluationResult" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.evaluationResult" style="width: 100%">
                <el-option label="优秀" value="优秀"></el-option>
                <el-option label="良好" value="良好"></el-option>
                <el-option label="合格" value="合格"></el-option>
                <el-option label="不合格" value="不合格"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" class="center-input"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click.prevent="removeTrainee(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
          <el-button type="primary" @click="addTrainee">添加人员</el-button>
        </div>
      </div>

      <!-- 评估结论 -->
      <div class="form-section">
        <el-form-item label="评估结论" prop="conclusion">
          <el-input type="textarea" v-model="effectForm.conclusion" rows="3"></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="稽查人" prop="inspector">
              <el-input v-model="effectForm.inspector"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="稽查日期" prop="inspectionDate">
              <el-date-picker
                v-model="effectForm.inspectionDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 表单按钮 -->
      <div class="form-actions">
        <el-button @click="resetForm('effectForm')">重置</el-button>
        <el-button type="primary" @click="submitForm('effectForm')">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'TrainingEffect',
  data() {
    return {
      loading: false,
      searchDialogVisible: false,
      resultDialogVisible: false,
      searchResults: [],
      searchForm: {
        trainingProject: '',
        trainingDate: ''
      },
      effectForm: {
        trainingProject: '',
        trainingDate: '',
        trainingLocation: '',
        trainer: '',
        participantCount: 0,
        trainingHours: 0,
        trainingContent: '',
        feedback: '',
        trainees: [],
        conclusion: '',
        inspector: '',
        inspectionDate: ''
      },
      rules: {
        trainingProject: [
          { required: true, message: '请输入培训项目', trigger: 'blur' }
        ],
        trainingDate: [
          { required: true, message: '请选择培训时间', trigger: 'change' }
        ],
        trainingLocation: [
          { required: true, message: '请输入培训地点', trigger: 'blur' }
        ],
        trainer: [
          { required: true, message: '请输入培训讲师', trigger: 'blur' }
        ],
        participantCount: [
          { required: true, message: '请输入参加人数', trigger: 'blur' },
          { type: 'number', min: 0, message: '参加人数必须大于等于0', trigger: 'blur' }
        ],
        trainingHours: [
          { required: true, message: '请输入培训课时', trigger: 'blur' },
          { type: 'number', min: 0, message: '培训课时必须大于等于0', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    showSearchDialog() {
      this.searchDialogVisible = true
    },
    addTrainee() {
      this.effectForm.trainees.push({
        employeeId: '',
        name: '',
        department: '',
        position: '',
        evaluationResult: '',
        remark: ''
      })
    },
    handleBack() {
      // 返回上一页
      this.$router.back()
    },
    removeTrainee(index) {
      this.effectForm.trainees.splice(index, 1)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.effectForm.trainees = []
    },
    async searchRecords() {
      try {
        this.loading = true;
        const response = await axios.get('http://192.168.110.22:8085/new/training-effect/list', {
          params: {
            trainingProject: this.searchForm.trainingProject,
            trainingDate: this.searchForm.trainingDate
          }
        });
        
        if (response.data) {
          this.searchResults = response.data;
          this.searchDialogVisible = false;
          this.resultDialogVisible = true;
        } else {
          this.$message.warning('未查询到数据');
        }
      } catch (error) {
        console.error('查询失败', error);
        this.$message.error('查询失败：' + (error.response?.data || '服务器错误'));
      } finally {
        this.loading = false;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;
            const response = await axios.post('http://192.168.110.22:8085/new/training-effect/save', this.effectForm);
            
            if (response.data === "保存成功") {
              this.$message.success('保存成功');
              this.resetForm(formName);
            } else {
              this.$message.error('保存失败');
            }
          } catch (error) {
            console.error('保存失败', error);
            this.$message.error('保存失败：' + (error.response?.data || '服务器错误'));
          } finally {
            this.loading = false;
          }
        } else {
          this.$message.error('请填写必填项');
          return false;
        }
      });
    },
    async viewRecord(record) {
      try {
        this.loading = true;
        const response = await axios.get(
          `http://192.168.110.22:8085/new/training-effect/${record.id}`
        );
        if (response.data) {
          this.effectForm = response.data;
          this.resultDialogVisible = false;
        }
      } catch (error) {
        console.error('获取详情失败', error);
        this.$message.error('获取详情失败：' + (error.response?.data || '服务器错误'));
      } finally {
        this.loading = false;
      }
    },
    editRecord(record) {
      this.viewRecord(record);
    },
    async deleteRecord(record) {
      try {
        await this.$confirm('确认删除该记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        
        const response = await axios.delete(
          `http://192.168.110.22:8085/new/training-effect/${record.id}`
        );
        
        if (response.data === "删除成功") {
          this.$message.success('删除成功');
          this.searchRecords();
        } else {
          this.$message.error('删除失败');
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败', error);
          this.$message.error('删除失败：' + (error.response?.data || '服务器错误'));
        }
      }
    }
  }
}
</script>

<style scoped>
.effect-check {
  padding: 20px;
  background-color: #f5f7fa;
}

.operation-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left-buttons, .right-buttons {
  display: flex;
  gap: 10px;
}

.effect-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
}

.form-section h3 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdfe6;
  color: #303133;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #dcdfe6;
}

.el-table {
  margin-bottom: 20px;
}

::v-deep .el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-textarea__inner {
  font-family: inherit;
}

/* 表格内容居中 */
::v-deep .el-table .cell {
  text-align: center;
}

/* 输入框文字居中 */
::v-deep .center-input .el-input__inner {
  text-align: center;
}

/* 下拉框文字居中 */
::v-deep .el-select .el-input__inner {
  text-align: center;
}

/* 表头居中 */
::v-deep .el-table th {
  text-align: center;
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

/* 表格单元格垂直居中 */
::v-deep .el-table td {
  vertical-align: middle;
}
</style> 